<!DOCTYPE HTML>

<html ng-app lang="en">

{{>/head}}

<style type="text/css">
     tr.rowlink {
        cursor: pointer;
     }
</style>

<div class="container"> <!--Normal Width container inside shadow box-->

    <!-- ========================================================================================================= row1 (Title)-->
     <div class="row">
        <center> <h1 class="logoBigText"><span class="vcu">RamBadger</span>.Users</h1></p></center>
     </div>
     <!-- ========================================================================================================= /row1 (Title)-->

     <!-- ========================================================================================================= row2 (User Profile List) -->
     <div class="row">
        <div class="col-md-12">
            <!-- ========================================================================================================= Repeating User List -->
            {{#users}}

                <div class="col-md-4 ">

                    <hr>

                    <!-- ========================================================================================================= User Photos -->
                    <div class="col-md-3 paddedBox">
                        <div class="user_photo">
                            <img height="50px" width="50px" src="/static/img/default_user.png" border=1>
                        </div>
                    </div>
                    <!-- ========================================================================================================= /User Photos -->

                    <!-- ========================================================================================================= User Information -->
                    <div class="col-md-9 userBox">
                        <p><a href="/user/{{username}}"><span class="glyphicon glyphicon-user"></span> {{username}}</a></p>

                        <table  >
                            <tr>
                                <td>Name:</td><td>{{firstName}} {{lastName}}</td>
                            </tr>
                            <tr>
                                <td>Email:</td><td>{{emailAddress}}</td>
                            </tr>
                        </table>

                        <!-- ========================================================================================================= Exp Points -->
                        {{=[[ ]]=}}

                        <p class="vcu">Exp Points: </p>
                        <div class="progress">
                            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                                <span class="sr-only">60% Complete</span>
                            </div>
                        </div>

                        <!-- ========================================================================================================= /Exp Points -->

                        <!-- <p class="vcu">Recent Badges:</p> <!-- Add Badges Here -->

                        [[={{ }}=]]
                    </div>
                    <!-- ========================================================================================================= /User Information -->

                </div><!-- /col-md-4 -->
            {{/users}}
            <!-- ========================================================================================================= /Repeating User List -->
        </div><!-- /col-md-12-->
     </div>
     <!-- ========================================================================================================= /row2 (User Profile List)-->

     <!-- ========================================================================================================= row3 (Pagination) -->
     <div class="row">
        {{#pagi}}
            <center>
                <ul class="pagination">
                    {{#pagi_front}}<li class="disabled"><a href="">First</a></li>{{/pagi_front}} <!--  Inactive First page -->
                    {{#pagi_front}}<li class="disabled"><a href="">&laquo;</a></li>{{/pagi_front}} <!--  Inactive back arrow -->

                    {{^pagi_front}} <li><a href="/users?page=1&limit={{pagi_limit}}">First</a> <a href="/users?page={{pagi_less}}&limit={{pagi_limit}}">&laquo;</a></li>{{/pagi_front}} <!-- Active back arrow and First -->

                    {{#pagination}}
                        {{#active}} <li ><a href="/users?page={{page}}&limit={{pagi_limit}}">{{page}}</a></li>{{/active}}  <!-- The Rest of the Page here (Links) -->
                        {{^active}} <li class="active"><a href="#">{{page}}</a></li>{{/active}}  <!-- The Active Page Here -->
                    {{/pagination}}

                    {{#pagi_back}}<li class="disabled"><a href="">&raquo;</a></li>{{/pagi_back}} <!-- Inactive forward arrow -->
                    {{#pagi_back}}<li class="disabled"><a href="">Last</a></li>{{/pagi_back}} <!-- Inactive Last page -->

                     {{^pagi_back}} <li><a href="/users?page={{pagi_great}}&limit={{pagi_limit}}">&raquo;</a> <a href="/users?page={{pagi_end}}&limit={{pagi_limit}}">Last</a></li>{{/pagi_back}} <!--Active forward arrow and Last -->
                </ul>
            </center>
        {{/pagi}}
    </div> <!-- /row -->
    <!-- ========================================================================================================= /row3 (Pagination)-->

</div> <!-- /container -->


{{>/foot}}

<script type="text/javascript">
$('tr.rowlink').click( function() {
    window.location = $(this).find('a').attr('href');
});

</script>
</html>